<template>
	<view v-if="shops && shops.length > 0">
		<!--<view class="grid margin-bottom text-center">
      <view v-for="(item,index) in shops" :key="index" class="margin-top-xs margin-bottom-sm">
        <view class="padding-sm  bg-white shops" @tap="_toShopDetail(item)">
          <view v-if="item.shopLogo">
            <image :src="item.shopLogo" class="shop-image c-radius"></image>
          </view>
		  <view v-else>
		    <image :src="noPic" class="shop-image c-radius"></image>
		  </view>
		  <view class="margin-left-sm  shop-info">
		  	<view class="text-left shop-title">
				<text>{{ item.shopName }}</text>
		  	  <text class="mode-name" v-if="item.modeName">{{ item.modeName }}</text>			  
		  	</view>
		  	<view class="text-left shop-desc">
		  		<text>{{ item.shopDesc }}</text>
		  	</view>
			<view class="text-left shop-goods margin-top-sm">
				<scroll-view class="scroll-goods-list" scroll-x show-scrollbar style="height:220upx">
					<view class="goods-card" v-for="(item1,index1) in item.productLabelDtos" :key="index1">
						<view class="">
							<image :src="item1.coverPhoto" mode="scaleToFill" class="goods-image"></image>
						</view>
						<view class="text-black">
							<text>{{ item1.prodName }}</text>
						</view>
						<view class="text-red">
							<text class="text-price">{{ item1.price }}</text>
						</view>
						
					</view>
					<image :src="item.shopLogo" class="goods-card c-radius"></image>
					<image :src="item.shopLogo" class="goods-card c-radius"></image>
				</scroll-view>
			</view>
			
			<view class="text-cut shop-address text-gray text-left">
			  <text class="cuIcon-locationfill text-orange margin-right-xs"></text>
			  {{ item.sendAddress }}
			</view>
			
		  </view>
          
          <view class="flex justify-between margin-top-xs">
            
          </view>
        </view>
      </view>
    </view>-->

		<view>
			<template v-for="(item,index) in shops">
				<view class="shops" :key="index" @tap="_toShopDetail(item)">
					<view v-if="item.shopLogo">
						<image mode="aspectFit" :src="item.shopLogo" class="shop-image"></image>
					</view>
					<view v-else>
						<image :src="noPic" class="shop-image"></image>
					</view>
					<view class="shop-info">
						<view class="shop-title">
							<text class="name">{{ item.shopName }}</text>
							<text class="mode" v-if="item.modeName">{{ item.modeName }}</text>
						</view>
						<view class="shop-desc">
							<text>{{ item.shopDesc }}</text>
						</view>
						<view class="shop-list">
							<scroll-view scroll-x show-scrollbar>
								<view class="shop-goods">
									<view class="card" v-for="(item1,index1) in item.productLabelDtos" :key="index1" @tap.stop="_toProduct(item1)">
										<view>
											<image :src="item1.coverPhoto" mode="scaleToFill" class="image"></image>
										</view>
										<view class="name">
											<text>{{ item1.prodName }}</text>
										</view>
										<view class="price">
											<text class="unit">￥</text>
											<text>{{ item1.price }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<view class="shop-address">
							<text class="cuIcon-locationfill icon"></text>
							{{ item.sendAddress }}
						</view>

					</view>
				</view>
			</template>
		</view>


	</view>

	<view v-else-if="shops && shops.length == 0">
		<no-data-page></no-data-page>
	</view>
	<view v-else class="no-data">正在请求数据 ...</view>
</template>
<script>
	import {
		loadCommunityShops
	} from '../../api/shop/shopApi.js'
	import {
		isNotNull
	} from "../../lib/java110/utils/StringUtil"
	import {
		getCommunityId
	} from '../../api/community/communityApi.js';
	import noDataPage from '@/components/no-data-page/no-data-page.vue';
	import conf from '@/conf/config.js';
	export default {
		props: {
			shopType: {
				type: String,
			},
			typeId: {
				type: String,
			},
			communityId: {
				type: String,
			}
		},
		data() {
			return {
				shops: null,
				i: 0,
				noPic: conf.commonBaseUrl + 'h5/static/noPic.png'
			}
		},
		mounted() {
			this._loadCommunityShops()
		},
		components: {
			noDataPage
		},
		methods: {
			_loadCommunityShops: function() {
				let _that = this;
				let _data = {
					page: 1,
					row: 50,
					communityId: this.communityId,
					state: '002'
				}
				// 组件传参店铺类型不为空，追加参数
				if (isNotNull(this.shopType)) {
					_data.rangeName = this.shopType
				}
				if (isNotNull(this.typeId)) {
					_data.shopType = this.typeId
				}
				loadCommunityShops(_data)
					.then((_shops) => {
						_that.shops = _shops;
						_that.i = _shops.length
					})
			},
			_toShopDetail: function(_shop) {
				this.vc.navigateTo({
					url: '/pages/cate/cate?shopId=' + _shop.shopId
				}, true)
			},
			_toProduct: function(e) {
				//uni.showToast({title: e.name,icon:"none"});
				this.vc.navigateTo({
					url: '/pages/goods/goods?productId=' + e.productId + "&shopId=" + e.shopId
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.shops {
		display: flex;
		padding: 25rpx;
		margin: 0 25rpx 25rpx 25rpx;
		border-radius: 20rpx;
		background: #FFF;
		.shop-info {
			flex: 1;
		}
		.shop-image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 25rpx;
			border-radius: 20rpx;
			background: #F5F5F5;
		}
		.shop-title {
			position: relative;
			padding-right: 5em;
			.name {
				font-size: 35rpx;
			}
			.mode {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				height: 50rpx;
				color: #909399;
				font-size: 24rpx;
				padding: 0 0.5em;
				border: 1rpx solid #EEE;
				border-radius: 0.5em;
			}
		}
		.shop-desc {
			color: #A07118;
			font-size: 26rpx;
			margin-top: 10rpx;
		}
		.shop-list {
			width: 512rpx;
		}
		.shop-goods {
			display: flex;
			margin-top: 25rpx;
			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
			.card {
				margin-right: 15rpx;
				.name {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.price {
					color: #FA5151;
					margin-top: 10rpx;
					.unit {
						font-size: 20rpx;
					}
				}
			}
		}
		.shop-address {
			display: flex;
			align-items: baseline;
			color: #909399;
			font-size: 24rpx;
			margin-top: 20rpx;
			.icon {
				color: #DDD;
				margin-right: 5rpx;
			}
		}
	}
</style>